<template>
  <view class="integral_container">
    <view class="home_top_bg">
      <view class="top_bgimg" :style="'height:' + topBarHeight + 'px;'">
        <view class="top_cont"
          :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px'">
          <image :src="staticUrl() + '/home/back.png'" alt="" @click="clickBack" class="top_back" />
          <view class="title">签到有礼</view>
        </view>
        <image :src="staticUrl() + '/new/indexBg.png'" alt="" class="top_bgc" />
      </view>
    </view>

    <view :style="'margin-top:' + topBarHeight + 'px'"> </view>

    <view style="position:relative">
      <view class="point">
        <view>我的松果</view>
        <view class="integralInfo" @click="clickIntegralInfo">
          <text>{{point}}</text>
          <image :src="staticUrl()+'/personalCenter/right.png'"></image>
        </view>
      </view>
      <view class="specification" @click="clickSpecification">规则说明</view>
      <image :src="staticUrl()+'/new/qt_bg.png'" class="qt_bg"></image>
      <view class="qd">
        <view class="qd_title">
          <image :src="staticUrl()+'/new/qd_item.png'"></image>
          <view>
            已连续签到<text>{{signDay}}</text>天
          </view>
        </view>
        <view class="qd_list">
          <view v-for="i in 7" :key="i">
            <view class="item"
              :class="i===signDay&&!whetherSignDay?'current':i<signDay?'formerly':''">
              <image :src="staticUrl()+'/new/cone.png'" class="cone"></image>
              <text>{{i+1}}天</text>
            </view>
          </view>
        </view>
        <view class="button"> <text @click="setSign">签到领取松果</text> </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCurrentIntegral, whetherSign, getSignInNumber, setSignInNumber } from '@/api/integral/index.js'

export default {
  data () {
    return {
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      point: 0,
      signDay: 0,
      whetherSignDay: false,
      days: [],
    }
  },
  onShow () {
    var self = this
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        // #ifdef MP-WEIXIN
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
        // #endif
        // #ifndef MP
        self.topBarHeight = self.tabBarHeight + self.stateBarHeight
        // #endif
        // #ifdef MP-TOUTIAO
        self.stateBarHeight = 0
        self.topBarHeight = 0
        // #endif
      }
    })
    this.getPoint()
    this.getSign()
    whetherSign().then(r => { this.whetherSignDay = r.data })
  },
  methods: {
    clickSpecification () {
      uni.navigateTo({ url: "/pages_user/integral/specification" })
    },
    clickIntegralInfo () {
      uni.navigateTo({ url: "/pages_user/integral/integralInfo" })
    },
    clickBack () {
      uni.navigateBack()
    },
    getPoint () {
      getCurrentIntegral().then(res => {
        this.point = res.data.point
      })
    },
    getSign () {
      getSignInNumber().then(res => {
        this.signDay = res.data || 0
      })
    },
    setSign () {
      if (this.whetherSignDay) {
        uni.showToast({ title: '今天已经签到过了', icon: 'none' })
        return
      }
      setSignInNumber().then(res => {
        if (res.code === 200) {
          uni.showToast({ title: '签到成功', icon: 'none' })
          this.getPoint()
          this.whetherSignDay = true
          this.signDay++
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.integral_container {
  width: 100%;
  height: 100vh;
  background: #f4f4f4;
  .home_top_bg {
    width: 100%;
    .top_bgimg {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      .top_cont {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 2;
        .top_back {
          width: 18rpx;
          height: 32rpx;
          position: absolute;
          left: 35rpx;
        }
        .title {
          width: 100%;
          font-size: 36rpx;
          color: #333333;
          text-align: center;
        }
        .ruleDescription {
          font-size: 24rpx;
          color: #666666;
        }
      }
      .top_bgc {
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  .point {
    position: relative;
    z-index: 2;
    font-size: 28rpx;
    padding-top: 48rpx;
    padding-left: 44rpx;
    padding: 50rpx 0 110rpx 44rpx;
    .integralInfo {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      text {
        font-size: 72rpx;
      }
      image {
        width: 18rpx;
        height: 32rpx;
        margin-left: 15rpx;
      }
    }
  }
  .qt_bg {
    width: 389rpx;
    height: 364rpx;
    position: absolute;
    top: 80rpx;
    right: 0;
  }
  .qd {
    margin: 0 24rpx;
    .qd_title {
      width: 301rpx;
      height: 52rpx;

      font-size: 32rpx;
      position: relative;
      image {
        width: 301rpx;
        height: 52rpx;
        position: absolute;
        top: 0;
        left: 0;
      }
      view {
        width: 280rpx;
        line-height: 60rpx;
        position: absolute;
        z-index: 2;
        text-align: center;
        color: #333333;
        text {
          color: #2871fc;
        }
      }
    }
    .qd_list {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8rpx;
      padding: 28rpx 29rpx 0 23rpx;
      position: relative;
      background: #fff;
      .item {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        width: 86rpx;
        height: 122rpx;
        color: #2871fc;
        font-size: 20rpx;
        background: #eaf1ff;
        border-radius: 12rpx;
        .cone {
          width: 40rpx;
          height: 45rpx;
          margin: 20rpx 0 6rpx 0;
        }
      }
      .formerly {
        background: rgba($color: #2871fc, $alpha: 0.3);
        .cone {
          opacity: 0.3;
        }
      }
      .current {
        color: #fff;
        background: #2871fc;
      }
    }
    .button {
      background: #fff;
      border-radius: 0 0 24rpx 24rpx;
      text {
        display: inline-block;
        width: 600rpx;
        height: 76rpx;
        line-height: 76rpx;
        text-align: center;
        background: #2871fc;
        box-shadow: inset 0rpx -10rpx 15rpx 0rpx #3c7fff;
        border-radius: 50rpx 50rpx 50rpx 50rpx;
        font-size: 30rpx;
        color: #fff;
        margin: 32rpx 51rpx;
      }
    }
  }
  .specification {
    position: absolute;
    top: 50rpx;
    right: 50rpx;
    font-size: 24rpx;
    color: #666666;
  }
}
</style>

